<template>
  <div id="couponCampClass">
    <h1 class="con-right-title">
      营课优惠券配置
    </h1>
    <!-- 操作按钮部分 -->
    <div class="table-conBtn">
      <el-button
        v-permission="'wh:couponManagement:add'"
        type="warning"
        icon="el-icon-plus"
        @click="showDialog()"
      >
        添加优惠券
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      max-height="490"
      ref="table"
    >
      <el-table-column type="index" align="center" width="50" label="序号">
        <template slot-scope="scope">
          {{
            scope.$index
              | filterPage(searchParams.pageNum, searchParams.pageSize)
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="couponIcon"
        label="优惠券图标"
        align="center"
        min-width="120"
      >
        <template slot-scope="scope">
          <el-image
            fit="fit"
            :src="scope.row.couponIcon"
            style="width:60%;height:60%"
            :preview-src-list="[scope.row.collectionsImages]"
          >
            <div slot="error" class="image-slot">
              暂无图片
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="liveRoomNumber" label="频道号" min-width="100">
      </el-table-column>
      <el-table-column prop="couponName" label="优惠券名称" min-width="150">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.couponNames" :key="index">
            {{ item }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="跳转链接" prop="jumpLink" min-width="280">
      </el-table-column>
      <el-table-column
        prop="operatorName"
        label="操作人"
        width="130"
      ></el-table-column>
      <el-table-column
        prop="operationTime"
        label="操作时间"
        min-width="150"
      ></el-table-column>
      <el-table-column label="操作" width="160" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="text"
            style="color:green"
            v-if="scope.row.state === 'SOLDOUT'"
            @click="handleModifyStatusOn(scope.row)"
          >
            上架
          </el-button>
          <el-button
            type="text"
            style="color: red;"
            v-else-if="scope.row.state === 'PUTAWAY'"
            @click="handleModifyStatusOff(scope.row)"
          >
            下架
          </el-button>
          <el-button
            type="text"
            v-if="scope.row.state !== 'PUTAWAY'"
            @click="showDialog(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            type="text"
            v-if="scope.row.state !== 'PUTAWAY'"
            @click="deleteReach(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <!-- 修改积分弹窗 -->
    <editDialog
      v-if="editDialogData.isShow"
      :dialog-data="editDialogData"
      @refresh="refresh"
    ></editDialog>
  </div>
</template>
<script>
import editDialog from '@component/intergralManagement/couponManagement/couponCampClass/editDialog' // 编辑弹窗
import { saveScrollMixins } from '@/mixins/saveScroll'
import {
  getCampClass,
  CampClassDelete,
  CampClassUpShelf,
  CampClassDownShelf
} from '@/api/couponsIntegral/campClass' // 接口

export default {
  name: 'couponCampClass',
  msg: '营课优惠券配置',
  mixins: [saveScrollMixins],
  components: {
    editDialog
  },
  data() {
    return {
      loading: false,
      total: 0,
      // 表格数据
      tableData: [],
      // 分页数据
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      // 传递给编辑弹框的数据
      editDialogData: {
        isShow: false, // 控制弹框显示
        params: {}, // 参数
        id: '' // 参数
      }
    }
  },
  mounted() {
    this.searchList()
  },
  methods: {
    /* 获取列表 */
    searchList() {
      this.loading = true
      let obj = Object.assign({}, this.searchParams)
      let params = obj
      getCampClass(
        params,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 编辑
    showDialog(params = {}) {
      this.editDialogData.isShow = true // 显示编辑弹框
      this.editDialogData.params.id = params.id
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },
    /*营课优惠券配置上架*/
    handleModifyStatusOn(params) {
      CampClassUpShelf(
        params.id,
        params,
        (response) => {
          this.loading = false
          this.$message({
            message: '上架成功',
            type: 'success'
          })
          this.searchList()
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /*营课优惠券配置下架*/
    handleModifyStatusOff(params) {
      CampClassDownShelf(
        params.id,
        params,
        (response) => {
          this.loading = false
          this.$message({
            message: '下架成功',
            type: 'success'
          })
          this.searchList()
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 删除营课优惠券配置提示
    deleteReach(id) {
      this.$confirm('确认删除营课优惠券么?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delItem(id)
      })
    },
    // 删除营课优惠券配置请求
    delItem(id) {
      CampClassDelete(
        id,
        (response) => {
          this.searchList()
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /* 编辑后，刷新列表 */
    refresh() {
      this.searchList()
    }
  }
}
</script>
<style lang="less">
#couponCampClass {
  display: flex;
  flex-direction: column;
  .table-conBtn {
    // margin-top: 20px;
  }
}
</style>
